import React from 'react';
import { connect } from 'dva';
import {  Button, Table, Form, Input, Popconfirm } from 'antd';
import AssetBrandModal from '../../components/basic/AssetBrandModal';
const FormItem = Form.Item;

function AssetBrand({ dispatch, assetBrand, loading, form }) {

  const { getFieldDecorator, getFieldsValue } = form;

  const columns = [{
    title: '品牌名称',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  }, {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    width: 200,
  },{
    title: '操作',
    key: 'operation',
    width: 100,
    render: (text, record) => (
        <span>
            <AssetBrandModal title="编辑资产品牌" record={record}  onOk={editHandler.bind(null, record.id_)}>
            <a>编辑</a>
            </AssetBrandModal>
            <span className="ant-divider" />
            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
            <a>删除</a>
            </Popconfirm>
        </span>
    ),
  }];

  const pagination = {
    current:assetBrand.current,
    pageSize:assetBrand.currentSize,
    total: assetBrand.total,
    showSizeChanger: true,
    showTotal: (total => '共' + assetBrand.total + '条'),
    onShowSizeChange(current, size) {
      dispatch({
        type: 'assetBrand/queryList',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
      });
    },
    onChange(current) {
      dispatch({
        type: 'assetBrand/queryList',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':assetBrand.currentSize} },
      });
    },
  };
  const submitHandle = () => {
    dispatch({
        type: 'assetBrand/queryList',
        payload: { ...getFieldsValue() },
    });
  }

  const createHandler = (values) => {
    dispatch({
      type: 'assetBrand/create',
      payload: values,
    });
  }

  const editHandler = (id, values) => {
    dispatch({
      type: 'assetBrand/edit',
      payload: { id, ...values },
    });
  }

  function deleteHandler(id) {
    dispatch({
      type: 'assetBrand/remove',
      payload: {id:id,search:{...getFieldsValue()}},
    });
  }


  return (
    <div style={{backgroundColor:'#fff'}}>
      <div style={{minHeight:'100%',}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
          <Form layout="inline" >
            <FormItem>
              {getFieldDecorator('name',{initialValue:''})(
                <Input type="text" placeholder="品牌名称" style={{ width:'200px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
            </FormItem>
            <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
              <FormItem>
                <AssetBrandModal title="新增品牌" record={{}}  onOk={createHandler}>
                  <Button type="primary" size='large'>新增品牌</Button>
                </AssetBrandModal>
              </FormItem>
            </div>
         </Form>
        </div>
        <div style={{width:'100%',padding:'30px 20px',}}>
          <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={assetBrand.assetBrandList} pagination={pagination}
          />
        </div>
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  return { assetBrand : state.assetBrand,loading:state.loading.models.assetBrand};
}

AssetBrand = Form.create()(AssetBrand);

export default connect(mapStateToProps)(AssetBrand);
